<template lang="html">
  <div>
    <v-pageTitle vtitle="当月接诊记录"></v-pageTitle>
    <div class="clear"></div>
    <el-row :gutter="20">

        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                  <el-col :xs="24" :sm="8" :md="8" :lg="8">
                      <el-progress type="circle" :percentage="67" :width="80"></el-progress>
                  </el-col>
                  <el-col :xs="24" :sm="11" :md="12" :lg="12">
                      <div class="cart-string">
                      <span>接诊总人数</span>
                      <span><h2>57 /人</h2></span>
                      </div>
                  </el-col>
                  <el-col :xs="24" :sm="5" :md="4" :lg="4">
                      <div>
                          <i class="material-icons">person_outline</i>
                      </div>
                  </el-col>
               </el-row>
            </el-card>
        </el-col>

        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                <el-col :xs="24" :sm="8" :md="8" :lg="8">
                    <div> <el-progress type="circle" :percentage="81" :width="80"></el-progress></div>
                </el-col>
                <el-col :xs="24" :sm="11" :md="12" :lg="12">
                    <div class="cart-string">
                    <span>预约订单总数</span>
                    <span><h2>68 /人</h2></span>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="5" :md="4" :lg="4">
                    <div>
                        <i class="material-icons">attach_money</i>
                    </div>
                </el-col>
               </el-row>
            </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8">
            <el-card class="box-card">
               <el-row :gutter="6">
                <el-col :xs="24" :sm="8" :md="8" :lg="8">
                    <div> <el-progress type="circle" :percentage="88" :width="80"></el-progress></div>
                </el-col>
                <el-col :xs="24" :sm="11" :md="12" :lg="12">
                    <div class="cart-string">
                    <span>未接待病人</span>
                    <span><h2>100 /人</h2></span>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="5" :md="4" :lg="4">
                    <div>
                        <i class="material-icons">replay</i>
                    </div>
                </el-col>
               </el-row>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="box-list">
          <lineChart></lineChart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import vPageTitle from '../common/pageTitle.vue';
import lineChart from '../charts/lineChart.vue';
export default {
  data(){
    return{

    }
  },
  components:{
    vPageTitle,lineChart
  }
}
</script>

<style lang="less" scoped>
.el-col{
    margin-bottom:16px;
    text-align:center;
}
.material-icons{
    font-size:80px;
    color:#ddd;
}
.box-card{
    height:110px;
}
.cart-string{
    height:100px;
    padding-top:10px;
    font-size:1.1rem;

}
.box-list{
  height: 500px;
}
</style>
